<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    @include('admin.public.style')
    @include('admin.public.script')
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 配置文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
    {{--    语言包--}}
    <script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
</head>

<body>
<div class="x-body layui-anim layui-anim-up">
    <form class="layui-form" id="art_form">
        <div class="layui-form-item">
            <label for="L_email" class="layui-form-label">
                <span class="x-red">*</span>父级分类
            </label>
            <div class="layui-input-inline">
                <select name="cate_id">
                    <option value="0">==顶级分类==</option>
                    @foreach($cate as $v)
                        <option value="{{ $v->cate_id }}">{{ $v->cate_name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_username" class="layui-form-label">
                <span class="x-red">*</span>文章标题
            </label>
            <div class="layui-input-block">
                <input type="text" id="L_username" name="art_title" required="" lay-verify=""
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_pass" class="layui-form-label">
                <span class="x-red">*</span>编辑
            </label>
            <div class="layui-input-inline">
                <input type="text" id="" name="art_editor" required="" lay-verify=""
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label for="L_pass" class="layui-form-label">
                <span class="x-red">*</span>缩略图
            </label>
            <div class="layui-input-block layui-upload">
                <input type="hidden" class="hidden" id="img1" name="art_thumb" value="">
                <button type="button" class="layui-btn" id="btn">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <input type="file" id="photoa_upload" name="photo" style="display: none"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <img src="" alt="" id="art_thumb_img" style="width: 190px;height: 110px">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
                <span class="x-red">*</span>关键词
            </label>
            <div class="layui-input-inline">
                <input type="text" id="" name="art_tag" required="" lay-verify=""
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
                <span class="x-red">*</span>文章描述
            </label>
            <div class="layui-input-block">
                <textarea id="" name="art_description" class="layui-textarea"></textarea>
{{--                <input type="text" id="" name="art_description" required="" lay-verify=""--}}
{{--                       autocomplete="off" class="layui-input">--}}
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
                <span class="x-red">*</span>文章内容
            </label>
            <div class="layui-input-block">
{{--                加载百度编辑器--}}
                <script id="container" style="height: 500px" name="art_content" type="text/plain">
                </script>
            </div>
        </div>
{{--        <div class="layui-form-item">--}}
{{--            <label for="L_repass" class="layui-form-label">--}}
{{--                <span class="x-red">*</span>文章内容--}}
{{--            </label>--}}
{{--            <div class="layui-input-block">--}}
{{--                <div class="layui-tab">--}}
{{--                    <ul class="layui-tab-title">--}}
{{--                        <li class="layui-this">输入markdown语法内容</li>--}}
{{--                        <li id="preViewBtn">预览Html语法的内容</li>--}}
{{--                    </ul>--}}
{{--                    <div class="layui-tab-content">--}}
{{--                        <div class="layui-tab-item layui-show">--}}
{{--                            <textarea id="z-textarea" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>--}}
{{--                        </div>--}}
{{--                        <div class="layui-tab-item">--}}
{{--                            <textarea id="z-textarea-preview" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="add" lay-submit="">
                增加
            </button>
        </div>
    </form>
</div>
<script>

    //markedown转换
    $.ajaxSetup({
        headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'}
    });

    $("#preViewBtn").click(function () {
        $.ajax({
            url:'/admin/article/pre_markdown',
            type:'post',
            data:{
                cont:$("#z-textarea").val()
            },
            success:function (data) {
                $("#z-textarea-preview").html(data);
            },
            error:function (error) {
                console.log(error.responseText);
            }
        });
    });
</script>
<script>

    //实例化百度编辑器
    var ue = UE.getEditor('container');

    layui.use(['form','layer','upload','element'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer;
        var upload = layui.upload;
        var element = layui.element;

        // //自定义验证规则
        // form.verify({
        //     nikename: function(value){
        //         if(value.length < 5){
        //             return '昵称至少得5个字符啊';
        //         }
        //     }
        //     ,pass: [/(.+){6,12}$/, '密码必须6到12位']
        //     ,repass: function(value){
        //         if($('#L_pass').val()!=$('#L_repass').val()){
        //             return '两次密码不一致';
        //         }
        //     }
        // });

        $('#btn').on('click',function () {
            $("#photoa_upload").trigger('click');
            $("#photoa_upload").on('change',function () {
                var obj = this;

                var formData = new FormData($("#art_form")[0]);
                $.ajax({
                    url:'/admin/article/upload',
                    type:'post',
                    //因为data的值是FormData对象，不需要对数据处理
                    data:formData,
                    processData:false,
                    contentType:false,
                    success:function (data) {
                        //console.log(data);
                        if(data['ServerNo']=='200'){
                            //如果成功
                            $("#art_thumb_img").attr('src','{{ env("ALIOSS_DOMAIN") }}'+data['ResultData']);
                            $('input[name=art_thumb]').val('{{ env("ALIOSS_DOMAIN") }}'+data['ResultData']);
                            $(obj).off('change');
                        }else{
                            //如果失败
                            alert(data['ResultData']);
                        }
                    },
                    error:function (XMLHttpRequest,textStatus,errorThrown) {
                        var number = XMLHttpRequest.status;
                        var info = '错误号'+number+'文件上传失败！';
                        alert(info);
                    },
                    async:true
                });
            });
        });

        //监听提交
        form.on('submit(add)', function(data){
            //发异步，把数据提交给php
            $.ajax({
                type:'POST',
                url:'/admin/article',
                dataType:'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data:data.field,
                success:function (data) {
                    //弹层提示添加成功，并刷新父页面
                    //console.log(data);
                    if(data.status==0){
                        layer.alert(data.message,{icon:6},function () {
                            parent.location.reload(true);
                        });
                    }else{
                        layer.alert(data.message,{icon:5});
                    }
                },
                error:function () {
                    //错误信息
                }
            });



            // layer.alert("增加成功", {icon: 6},function () {
            //     // 获得frame索引
            //     var index = parent.layer.getFrameIndex(window.name);
            //     //关闭当前frame
            //     parent.layer.close(index);
            // });
            return false;
        });


    });
</script>
<script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        //hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();</script>
</body>

</html>
